/* buttons 
    * DS: Design System
    * DS Filled: .el-button--primary
    * DS Outlined: .el-button--primary.is-plain
    * DS Pilled: .el-button--primary.is-round
    * DS Tonal: .el-button--info
    * DS Sharp: &.rounded-none
    * DS Text: &.is-text
    * DS Underlined: &.is-link
    * DS Icon Button: &.is-circle
*/
.el-button {
  --el-button-border-color: var(--stroke-border-cta-rest);
  --el-button-bg-color: var(--surface-filled-rest);
  --el-button-text-color: var(--text-cta-achromatic);
  --el-button-disabled-text-color: var(--text-cta-disabled);
  --el-button-disabled-bg-color: var(--surface-filled-disabled);
  --el-button-disabled-border-color: transparent;
  --el-button-divide-border-color: var(--stroke-divider-filled);
  --el-button-hover-text-color: var(--text-cta-achromatic);
  --el-button-hover-bg-color: var(--surface-filled-hover);
  --el-button-hover-border-color: transparent;
  --el-button-active-text-color: var(--text-cta-achromatic);
  --el-button-active-border-color: transparent;
  --el-button-active-bg-color: var(--surface-filled-pressed);
  --el-button-outline-color: var(--stroke-border-cta-focused);
  --el-button-hover-link-text-color: var(--text-cta-hover);
  --el-button-active-color: var(--text-cta-rest);
  @apply py-2 px-4 h-9 leading-5 rounded-lg;
  font-size: 16px;
  &.is-plain {
    --el-button-border-color: var(--stroke-border-cta-rest);
    --el-button-bg-color: transparent;
    --el-button-text-color: var(--text-cta-rest);
    --el-button-divide-border-color: var(--stroke-border-cta-rest);
    --el-button-hover-bg-color: var(--surface-tonal-hover);
    --el-button-hover-border-color: var(--stroke-border-cta-hover);
    --el-button-hover-text-color: var(--text-cta-hover);
    --el-button-hover-link-text-color: var(--text-cta-hover);
    --el-button-active-border-color: var(--stroke-border-cta-pressed);
    --el-button-active-bg-color: transparent;
    --el-button-active-text-color: var(--text-cta-pressed);
    --el-button-active-color: var(--text-cta-rest);
    --el-button-outline-color: var(--stroke-border-cta-focused);
    &.is-disabled,
    &.is-disabled:hover,
    &.is-disabled:not(:first-child):not(:last-child) {
      border-color: var(--stroke-border-cta-disabled);
      background-color: transparent;
      color: var(--text-cta-disabled);
    }
  }
  &.el-button--medium {
    font-size: 16px;
    @apply p-3 h-11;
  }
  &.el-button--large {
    font-size: 16px;
    @apply p-3 h-12;
  }
  &.is-text,
  &.is-link {
    --el-button-text-color: var(--text-cta-rest);
    --el-button-disabled-text-color: var(--text-cta-disabled);
    --el-button-hover-text-color: var(--text-cta-hover);
    --el-button-active-text-color: var(--text-cta-pressed);
    --el-button-hover-link-text-color: var(--text-cta-hover);
    --el-button-active-color: var(--text-cta-rest);
  }
  &.is-text,
  &.is-link {
    &:hover:not(.is-disabled) {
      color: var(--text-cta-hover);
      background-color: transparent;
    }
  }
  &.is-link {
    @apply underline h-9;
  }
  &.rounded-none {
    border-radius: 0;
  }
  &.is-circle {
    @apply p-2 w-9 h-9 rounded-lg;
    &.el-button--small {
      font-size: 12px;
      @apply p-1 w-6 h-6;
    }
    &.el-button--medium {
      font-size: 20px;
      @apply p-3 w-11 h-11;
    }
    &.el-button--large {
      font-size: 20px;
      @apply p-3 w-12 h-12;
    }
    &.is-round {
      @apply rounded-full;
    }
    &.rounded-none {
      border-radius: 0;
    }
  }
}
.el-button--info {
  @apply border-none;
  --el-button-bg-color: var(--surface-tonal-rest);
  --el-button-text-color: var(--text-cta-tonal);
  --el-button-disabled-text-color: var(--text-cta-disabled);
  --el-button-disabled-bg-color: var(--surface-tonal-disabled);
  --el-button-divide-border-color: var(--stroke-divider-subtle);
  --el-button-hover-text-color: var(--text-cta-tonal);
  --el-button-hover-bg-color: var(--surface-tonal-hover);
  --el-button-active-text-color: var(--text-cta-tonal);
  --el-button-active-bg-color: var(--surface-tonal-pressed);
  --el-button-outline-color: var(--stroke-border-cta-focused);
}

.el-button-group {
  > .el-button {
    &.is-circle {
      &.is-round {
        &:first-child {
          @apply rounded-tr-none rounded-br-none;
        }
        &:last-child {
          @apply rounded-tl-none rounded-bl-none;
        }
      }
    }
    &.el-button--primary:not(.is-plain) {
      &:not(:first-child):hover,
      &:not(:first-child) {
        border-left-color: var(--stroke-divider-filled);
        &.is-disabled,
        &.is-disabled:hover {
          border-left-color: var(--stroke-border-cta-disabled);
        }
      }
      &.is-disabled:first-child:hover,
      &.is-disabled:not(:first-child):not(:last-child) {
        border-right-color: var(--stroke-border-cta-disabled);
      }
    }
  }
}
